<template>
    <div class="marLR20">
        <div class="tableWrapper marT20 padd20">
            <el-row :gutter="20">
                <el-tag :type="isAchieveShow ? '' : 'warning'" style="cursor:pointer;" @click.stop.native="getEduExper(2)">绩效</el-tag>
                <el-tag :type="isTaxesShow ? '' : 'warning'" style="cursor:pointer;" @click.stop.native="getTaxes">税金</el-tag>
            </el-row>
        </div>

        <!-- 税金 -->
        <!-- <el-tabs type="border-card" @tab-click="getPics"  v-model="editableTabsValue" v-show="isTaxesShow" class="marT20"> -->
        <el-tabs type="border-card" @tab-click="getTaxes"  v-model="editableTabsValue" class="marT20" v-show="isTaxesShow">
            <el-tab-pane label="公积金和社保" name = 1>
                <el-row class="posRelative">
                    <icon name="reportError" class="scaleIcon1 reportErrorIcon" title="上报错误"  style="cursor:pointer;"></icon>
                    <el-col :span="24">
                        <el-form ref="fundSocialFrm" :model="fundSocialFrm"  :rules="rules" :inline="true" hide-required-asterisk=true label-width="100px">
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="历史社保" prop="existWorkingAge">
                                        <p class="ellipsis" :title="fundSocialFrm.existWorkingAge === '' ? '/' : fundSocialFrm.existWorkingAge">{{fundSocialFrm.existWorkingAge === '' ? '/' : fundSocialFrm.existWorkingAge}}</p>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="本司社保" prop="comSocialSec">
                                        <p class="ellipsis" :title="fundSocialFrm.comSocialSec">{{fundSocialFrm.comSocialSec}}</p>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="本司工龄" prop="comWorkingTime">
                                        <p class="ellipsis" :title="fundSocialFrm.comWorkingTime">{{fundSocialFrm.comWorkingTime}}</p>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="社保期数" prop="totalWorkingTime">
                                        <p class="ellipsis" :title="fundSocialFrm.totalWorkingTime === '' ? '/' : fundSocialFrm.totalWorkingTime">{{fundSocialFrm.totalWorkingTime === '' ? '/' : fundSocialFrm.totalWorkingTime}}</p>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="公积金账号" prop="fundAccount">
                                        <el-input v-model.trim.number="fundSocialFrm.fundAccount" placeholder="请输入公积金账号" maxlength='12' class="inputTxtWrapper" v-if="isFundAccountInputShow"></el-input>
                                        <p class="ellipsis" :title="fundSocialFrm.fundAccount" v-else>{{fundSocialFrm.fundAccount}}</p>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="年假" prop="annualLeaveDays">
                                        <p class="ellipsis" :title="fundSocialFrm.annualLeaveDays">{{fundSocialFrm.annualLeaveDays}}</p>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="社保截止时间" prop="socialEndTime">
                                        <p class="ellipsis" :title="fundSocialFrm.socialEndTime === '' ? '/' : fundSocialFrm.socialEndTime">{{fundSocialFrm.socialEndTime === '' ? '/' : fundSocialFrm.socialEndTime}}</p>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <div class="btnsWrapper"  v-if="isFundAccountInputShow">
                                <button class="operatBtn" @click.stop="updateFundAccount">提交</button>
                            </div>

                        </el-form>

                    </el-col>
                </el-row>
            </el-tab-pane>

            <!-- 六项申报扣除  -->
            <el-tab-pane label="六项申报扣除" name = 3>
                <tax></tax>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import http from '@/assets/js/http'
import _g from '@/assets/js/global'

import tax from './components/tax'

export default {
    components : {
        tax
    },
    data(){
        return {
            /* 绩效 */
            isAchieveShow : true,// 绩效默认显示

            /* 税金 */
            editableTabsValue : '1',//..默认选中公积金和社保
            isTaxesShow : false,// 税金默认隐藏

            // 公积金与社保
            fundSocialFrm:{
                existWorkingAge:'',  //  历史社保
                comSocialSec:'',  //  本司社保
                comWorkingTime:'',  //  本司工龄
                totalWorkingTime:'',  //  总工龄
                fundAccount:null,  //  公积金账号

                annualLeaveDays : 0,//  年假天数
                socialEndTime : '',//..社保截止时间
            },
            isFundAccountInputShow : true,//    默认公积金文本框显示

             rules: {
                fundAccount: [{
                    required: true,
                    message: "请输入公积金账号",
                    trigger: "blur"
                }
            ],
             }
        }
    },
    methods: {
        /* 批量重置标签对应各版块隐藏 */
        resetTagModuleHide(){
            this.isAchieveShow = false
            this.isTaxesShow = false
        },
         /* 根据用户id查询用户基本信息(获取公积金与社保) */
        getTaxes(){
            const that = this
            const editableTabsValue = that.editableTabsValue
            
            if(editableTabsValue === '1'){  //..公积金与社保
                 _g.showLoading('加载中')
                that.apiPost('admin/users/queryBaseMsgByUserId').then((res) => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if (res.code != 200) {
                        that.handleError(res)
                    } else {
                        if(res.data.isSuccess === 0){             //  成功
                            // 公积金与社保初始化
                            that.fundSocialFrm.existWorkingAge = res.data.userBaseInfo.exist_working_age === null ? '' : res.data.userBaseInfo.exist_working_age
                            that.fundSocialFrm.comSocialSec = res.data.userBaseInfo.company_social_sec === null ? 0 : res.data.userBaseInfo.company_social_sec
                            that.fundSocialFrm.comWorkingTime = res.data.userBaseInfo.company_working_time === null ? 0 : res.data.userBaseInfo.company_working_time
                            // that.fundSocialFrm.fundAccount = res.data.userBaseInfo.fund_account === null ? '' : res.data.userBaseInfo.fund_account
                            that.fundSocialFrm.fundAccount = res.data.userBaseInfo.fund_account

                            that.fundSocialFrm.annualLeaveDays = res.data.userBaseInfo.annualLeaveDays
                            that.fundSocialFrm.socialEndTime = res.data.userBaseInfo.social_end_time === null ? '' : res.data.userBaseInfo.social_end_time

                            that.isFundAccountInputShow =res.data.userBaseInfo.fund_account === null ? true : false

                            if(res.data.userBaseInfo.exist_working_age !== null){
                                // that.fundSocialFrm.totalWorkingTime = parseInt(res.data.userBaseInfo.exist_working_age) + parseInt(res.data.userBaseInfo.company_social_sec) + parseInt(res.data.userBaseInfo.company_working_time)
                                that.fundSocialFrm.totalWorkingTime = parseInt(res.data.userBaseInfo.exist_working_age) + parseInt(that.fundSocialFrm.comSocialSec)
                            }
                            
                            that.resetTagModuleHide()
                            that.isTaxesShow = true
                        }else{
                            _g.toastMsg("error", res.message)
                        }
                    }
                })
            }
            // else if(editableTabsValue === '2'){
            // }
        },

        /* 根据人员id更新公积金账号 */
        updateFundAccount(){
            const that = this

            const fundAccount = that.fundSocialFrm.fundAccount

            this.$refs['fundSocialFrm'].validate((valid) => {
                if(valid){
                    that.$confirm('是否确认修改?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                    }).then(() => {
                         _g.showLoading('加载中')
                        that.apiPost('admin/users/updateFundAccount',{fundAccount}).then((res) => {
                            _g.showLoading().close()
                            if(typeof res === 'string'){
                                res = JSON.parse(res)
                            }
                            if (res.code != 200) {
                                that.handleError(res)
                            } else {
                                if(res.data.isSuccess === 0){             //  成功
                                that.isFundAccountInputShow = false
                                }else if(res.data.isSuccess === 1){
                                    _g.toastMsg("error", res.message)
                                }else if(res.data.isSuccess === 2){
                                    that.isFundAccountInputShow = false
                                    _g.toastMsg("warning", res.message)
                                }
                            }
                        })
                    }).catch(() => {})
                }
            })
        },
    },
    mixins: [http]
}
</script>

